<%# The container tag
  - available local variables
    current_page:  a page object for the currently displayed page
    total_pages:   total number of pages
    per_page:      number of items to fetch per page
    remote:        data-remote
    paginator:     the paginator that renders the pagination tags inside
-%>
<%= paginator.render do -%>
  <nav class="pagination flex items-center justify-center gap-x-1 mt-16" role="navigation" aria-label="pager">
    <%= prev_page_tag %>

    <div class="flex items-center gap-x-1">
      <% each_page do |page| -%>
        <% if page.display_tag? -%>
          <%= page_tag page %>
        <% elsif !page.was_truncated? -%>
          <%= gap_tag %>
        <% end -%>
      <% end -%>
    </div>

    <% unless current_page.out_of_range? %>
      <%= next_page_tag %>
    <% end %>
  </nav>
<% end -%>
